<script setup lang="js">
import {ref, onMounted} from "vue";
import {getOrderDetail, updateOrderNote, closeOrder, deleteOrder,updateMoneyInfo,updateReceiverInfo} from "@/api/orderList.js";
import {useRoute} from "vue-router";
import {WarningFilled} from "@element-plus/icons-vue";
import LogisticsDialog from "./logisticsDialog.vue";
import MessageDialog from "./messageDialog.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();
const order = ref({});
const id = ref(route.query.id);
const list = ref(route.query.id); // 保留 list 变量
const defaultReceiverInfo = {
  orderId: null,
  receiverName: null,
  receiverPhone: null,
  receiverPostCode: null,
  receiverDetailAddress: null,
  receiverProvince: null,
  receiverCity: null,
  receiverRegion: null,
  status: null
};
const receiverInfo = ref(Object.assign({}, defaultReceiverInfo));


onMounted(() => {
  getOrderDetail(id.value).then((res) => {
    order.value = res.data.data;
  }).catch((err) => {
    console.log(err);
  });
})


// 格式化订单创建时间
const formatDate = (date) => {
  // 检查是否为 Date 对象
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  const second = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
const formatTime = (time) => {
  if (time == null || time === '') {
    return '';
  }
  let date = new Date(time);
  return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
// 格式化订单状态
const formatStatus = (value) => {
  if (value === 1) {
    return '待发货';
  } else if (value === 2) {
    return '已发货';
  } else if (value === 3) {
    return '已完成';
  } else if (value === 4) {
    return '已关闭';
  } else if (value === 5) {
    return '无效订单';
  } else {
    return '待付款';
  }
}
// 格式化订单步骤状态
const formatStepStatus = (value) => {
  if (value === 1) {
    //待发货
    return 2;
  } else if (value === 2) {
    //已发货
    return 3;
  } else if (value === 3) {
    //已完成
    return 4;
  } else {
    //待付款、已关闭、无限订单
    return 1;
  }
}
// 格式化空状态
const formatNull = (value) => {
  if (value === undefined || value === null || value === '') {
    return '暂无';
  } else {
    return value;
  }
}
// 格式化长文本
const formatLongText = (value) => {
  if (value === undefined || value === null || value === '') {
    return '暂无';
  } else if (value.length > 8) {
    // // 超过8个字符，截取前8个字符并加上省略号
    return value.substring(0, 8) + '...';
  } else {
    return value;
  }
}
// 格式化支付方式
const formatPayType = (value) => {
  if (value === 1) {
    return '支付宝';
  } else if (value === 2) {
    return '微信';
  } else {
    return '未支付';
  }
}
// 格式化支付状态
const formatPayStatus = (value) => {
  if (value === 0) {
    return '未支付';
  } else if (value === 4) {
    return '已退款';
  } else {
    return '已支付';
  }
}
// 格式化订单来源
const formatSourceType = (value) => {
  if (value === 1) {
    return 'APP订单';
  } else {
    return 'PC订单';
  }
}
// 格式化订单类型
const formatOrderType = (value) => {
  if (value === 1) {
    return '秒杀订单';
  } else {
    return '正常订单';
  }
}
// 格式化发货状态
const formatDeliverStatus = (value) => {
  if (value === 0 || value === 1) {
    return '未发货';
  } else {
    return '已发货';
  }
}
// 格式化商品属性
const formatProductAttr = (value) => {
  if (value === null) {
    return '';
  } else {
    let attr = JSON.parse(value);
    let result = '';
    for (let i = 0; i < attr.length; i++) {
      result += attr[i].key;
      result += ":\n";
      result += attr[i].value;
      result += ";";
    }
    return result;
  }
}
// 格式化地址
const formatAddress = (order) => {
  let str = order.receiverProvince;
  if (order.receiverCity !== null) {
    str += "-" + order.receiverCity;
  }
  str += "-" + order.receiverRegion;
  str += "-" + order.receiverDetailAddress;
  return str;
}

// 订单详情中订单跟踪
const logisticsDialogVisible = ref(false);
const showLogisticsDialog = () => {
  logisticsDialogVisible.value = true;
}
// 发送站内信
const messageDialogVisible = ref(false);
const sendMessage = ref({title: '', content: ''});
const showMessageDialog = () => {
  sendMessage.value.title = null;
  sendMessage.value.content = null;
  messageDialogVisible.value = true;
}
// 备注订单
const markOrderDialogVisible = ref(false);
const markInfo = ref({note: ''});
const showMarkOrderDialog = () => {
  markOrderDialogVisible.value = true;
  markInfo.id = id.value;
  closeInfo.value.note = null;
}
const handleMarkOrder = () => {
  ElMessageBox.confirm('确定关闭？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let params = new URLSearchParams();
    params.append("id", order.value.id);
    params.append("note", markInfo.value.note);
    params.append("status", order.value.status);
    updateOrderNote(params).then(res => {
      markOrderDialogVisible.value = false;
      ElMessage.warning(res.data.message);
      ElMessage.success('操作成功！')
      getOrderDetail(id.value).then(res => {
        order.value = res.data.data;
      })
    })
  }).catch(() => {
    console.log('取消操作！')
  })
}

// 关闭订单
const closeDialogVisible = ref(false);
const closeInfo = ref({note: null, id: null});
const showCloseOrderDialog = () => {
  closeDialogVisible.value = true;
  closeInfo.value.note = null;
  closeInfo.value.id = id.value;
}
const handleCloseOrder = () => {
  ElMessageBox.confirm('是否要关闭该订单？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let params = new URLSearchParams();
    params.append("ids", [closeInfo.value.id]);
    params.append("note", closeInfo.value.note);
    closeOrder(params).then(res => {
      closeDialogVisible.value = false;
      ElMessage.warning(res.data.message);
      ElMessage.success('操作成功！')
      getOrderDetail(id.value).then(res => {
        order.value = res.data.data;
      })
    })
  }).catch(() => {
    console.log('取消操作！')
  })
}

// 删除订单
const handleDeleteOrder = () => {
  ElMessageBox.confirm('是否要删除该订单？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let params = new URLSearchParams();
    params.append("ids", [id.value]);
    deleteOrder(params).then(res => {
      ElMessage.warning(res.data.message);
      ElMessage.success('操作成功！')
    })
    router.back();
  }).catch(() => {
    console.log('取消操作！')
  })
}

// 修改费用信息
const moneyDialogVisible = ref(false);
const moneyInfo = ref({
  orderId:null,
  freightAmount:0,
  discountAmount:0,
  status:null
})
const showUpdateMoneyDialog = () => {
  moneyDialogVisible.value = true;
  moneyInfo.value.orderId = id.value;
  moneyInfo.value.freightAmount = order.value.freightAmount;
  moneyInfo.value.discountAmount = order.value.discountAmount;
  moneyInfo.value.status = order.value.status;
}
const handleUpdateMoneyInfo = () => {
  ElMessageBox.confirm('是否要修改该订单的费用信息？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
   updateMoneyInfo(moneyInfo.value).then(res => {
      moneyDialogVisible.value = false;
      ElMessage.warning(res.data.message);
      ElMessage.success('操作成功！')
      getOrderDetail(id.value).then(res => {
        order.value = res.data.data;
      })
    })
  }).catch(() => {
    console.log('取消操作！')
  })
}

</script>

<template>
  <div class="order-detail">
    <div class="order-header">
      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
        <el-step title="提交订单" :description="formatTime(order.createTime)"></el-step>
        <el-step title="支付订单" :description="formatTime(order.paymentTime)"></el-step>
        <el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step>
        <el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step>
        <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
      </el-steps>
    </div>
    <div class="order-body">
      <el-card>
        <div class="operate-container">
          <div class="color-danger">
            <el-icon style="margin: 10px 10px 10px 20px;">
              <WarningFilled/>
            </el-icon>
            <span>当前订单状态：{{ formatStatus(order.status) }}</span>
          </div>
          <!--  订单状态：待付款-->
          <div class="operate-button-container" v-show="order.status===0">
            <el-button @click="showUpdateReceiverDialog">修改收货人信息</el-button>
            <el-button @click="showUpdateMoneyDialog">修改费用信息</el-button>
            <el-button @click="showMessageDialog">发送站内信</el-button>
            <el-button @click="showCloseOrderDialog">关闭订单</el-button>
            <el-button type="primary" plain @click="showMarkOrderDialog">备注订单</el-button>
          </div>
          <!--  订单状态：待发货-->
          <div class="operate-button-container" v-show="order.status===1">
            <el-button @click="showUpdateReceiverDialog">修改收货人信息</el-button>
            <el-button @click="showMessageDialog">发送站内信</el-button>
            <el-button>取消订单</el-button>
            <el-button type="primary" plain @click="showMarkOrderDialog">备注订单</el-button>
          </div>
          <!--  订单状态：已完成-->
          <div class="operate-button-container" v-show="order.status===2||order.status===3">
            <el-button @click="showLogisticsDialog">订单跟踪</el-button>
            <el-button @click="showMessageDialog">发送站内信</el-button>
            <el-button type="primary" plain @click="showMarkOrderDialog">备注订单</el-button>
          </div>
          <!--  订单状态：已关闭-->
          <div class="operate-button-container" v-show="order.status===4">
            <el-button @click="handleDeleteOrder">删除订单</el-button>
            <el-button type="primary" plain @click="showMarkOrderDialog">备注订单</el-button>
          </div>
        </div>
        <!-- 基本信息-->
        <div class="order-title">
          <svg t="1750134429542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2533" width="40" height="40">
            <path
                d="M727.353766 788.089036c13.517875 0 23.923876-15.168468 23.923876-32.730449L751.277642 268.641413c0-17.561981-10.406001-32.731472-23.923876-32.731472L296.64828 235.909941c-13.519921 0-23.925922 15.168468-23.925922 32.731472l0 486.718197c0 17.561981 10.406001 32.730449 23.925922 32.730449L727.353766 788.090059 727.353766 788.089036zM346.346169 309.534775l184.060039 0 0 36.811394L346.346169 346.346169 346.346169 309.534775 346.346169 309.534775zM346.346169 419.96998l331.307661 0 0 36.812417L346.346169 456.782398 346.346169 419.96998 346.346169 419.96998zM346.346169 530.406209l331.307661 0 0 36.812417L346.346169 567.218626 346.346169 530.406209 346.346169 530.406209zM346.346169 640.841414l331.307661 0 0 36.811394L346.346169 677.652807 346.346169 640.841414 346.346169 640.841414zM346.346169 640.841414"
                fill="#1296db" p-id="2534"></path>
          </svg>
          <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="4" class="table-cell-title">订单编号</el-col>
            <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
            <el-col :span="4" class="table-cell-title">用户账号</el-col>
            <el-col :span="4" class="table-cell-title">支付方式</el-col>
            <el-col :span="4" class="table-cell-title">订单来源</el-col>
            <el-col :span="4" class="table-cell-title">订单类型</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ order.orderSn }}</el-col>
            <el-col :span="4" class="table-cell">暂无</el-col>
            <el-col :span="4" class="table-cell">{{ order.memberUsername }}</el-col>
            <el-col :span="4" class="table-cell">{{ formatPayType(order.payType) }}</el-col>
            <el-col :span="4" class="table-cell">{{ order.sourceType === 1 ? 'APP订单' : 'PC订单' }}</el-col>
            <el-col :span="4" class="table-cell">{{ order.orderType === 1 ? '秒杀订单' : '正常订单' }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell-title">配送方式</el-col>
            <el-col :span="4" class="table-cell-title">物流单号</el-col>
            <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
            <el-col :span="4" class="table-cell-title">订单可得优币</el-col>
            <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>
            <el-col :span="4" class="table-cell-title">活动信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ formatNull(order.deliveryCompany) }}</el-col>
            <el-col :span="4" class="table-cell">{{ formatNull(order.deliverySn) }}</el-col>
            <el-col :span="4" class="table-cell">{{ order.autoConfirmDay }}天</el-col>
            <el-col :span="4" class="table-cell">{{ order.integration }}</el-col>
            <el-col :span="4" class="table-cell">{{ order.growth }}</el-col>
            <el-col :span="4" class="table-cell">
              <el-popover
                  class="box-item"
                  title="活动信息"
                  width="200"
                  :content="order.promotionInfo"
                  placement="top"
              >
                <template #reference>
                  <span>{{ formatLongText(order.promotionInfo) }}</span>
                </template>
              </el-popover>
            </el-col>
          </el-row>
        </div>
        <!-- 收货人信息-->
        <div class="order-title">
          <svg t="1750134429542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2533" width="40" height="40">
            <path
                d="M727.353766 788.089036c13.517875 0 23.923876-15.168468 23.923876-32.730449L751.277642 268.641413c0-17.561981-10.406001-32.731472-23.923876-32.731472L296.64828 235.909941c-13.519921 0-23.925922 15.168468-23.925922 32.731472l0 486.718197c0 17.561981 10.406001 32.730449 23.925922 32.730449L727.353766 788.090059 727.353766 788.089036zM346.346169 309.534775l184.060039 0 0 36.811394L346.346169 346.346169 346.346169 309.534775 346.346169 309.534775zM346.346169 419.96998l331.307661 0 0 36.812417L346.346169 456.782398 346.346169 419.96998 346.346169 419.96998zM346.346169 530.406209l331.307661 0 0 36.812417L346.346169 567.218626 346.346169 530.406209 346.346169 530.406209zM346.346169 640.841414l331.307661 0 0 36.811394L346.346169 677.652807 346.346169 640.841414 346.346169 640.841414zM346.346169 640.841414"
                fill="#1296db" p-id="2534"></path>
          </svg>
          <span class="font-small">收货人信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">收货人</el-col>
            <el-col :span="6" class="table-cell-title">手机号码</el-col>
            <el-col :span="6" class="table-cell-title">邮政编码</el-col>
            <el-col :span="6" class="table-cell-title">收货地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ order.receiverName }}</el-col>
            <el-col :span="6" class="table-cell">{{ order.receiverPhone }}</el-col>
            <el-col :span="6" class="table-cell">{{ order.receiverPostCode }}</el-col>
            <el-col :span="6" class="table-cell">{{ formatAddress(order) }}</el-col>
          </el-row>
        </div>
        <!-- 商品信息-->
        <div class="order-title">
          <svg t="1750134429542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2533" width="40" height="40">
            <path
                d="M727.353766 788.089036c13.517875 0 23.923876-15.168468 23.923876-32.730449L751.277642 268.641413c0-17.561981-10.406001-32.731472-23.923876-32.731472L296.64828 235.909941c-13.519921 0-23.925922 15.168468-23.925922 32.731472l0 486.718197c0 17.561981 10.406001 32.730449 23.925922 32.730449L727.353766 788.090059 727.353766 788.089036zM346.346169 309.534775l184.060039 0 0 36.811394L346.346169 346.346169 346.346169 309.534775 346.346169 309.534775zM346.346169 419.96998l331.307661 0 0 36.812417L346.346169 456.782398 346.346169 419.96998 346.346169 419.96998zM346.346169 530.406209l331.307661 0 0 36.812417L346.346169 567.218626 346.346169 530.406209 346.346169 530.406209zM346.346169 640.841414l331.307661 0 0 36.811394L346.346169 677.652807 346.346169 640.841414 346.346169 640.841414zM346.346169 640.841414"
                fill="#1296db" p-id="2534"></path>
          </svg>
          <span class="font-small">商品信息</span>
        </div>
        <el-table :data="order.orderItemList" border style="width: 100%">
          <el-table-column label="商品图片" width="180" align="center">
            <template #default="{ row }">
              <img :src="row.productPic" style="height: 80px" alt=""/>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template #default="{ row }">
              <p>{{ row.productName }}</p>
              <p>品牌：{{ row.productBrand }}</p>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号" width="180" align="center">
            <template #default="{ row }">
              <p>价格：￥{{ row.productPrice }}</p>
              <p>货号：{{ row.productSn }}</p>
            </template>
          </el-table-column>
          <el-table-column label="商品属性" width="180" align="center">
            <template #default="{ row }">
              {{ formatProductAttr(row.productAttr) }}
            </template>
          </el-table-column>
          <el-table-column label="商品数量" width="150" align="center">
            <template #default="{ row }">
              {{ row.productQuantity }}
            </template>
          </el-table-column>
          <el-table-column label="小计" width="150" align="center">
            <template #default="{ row }">
              ￥{{ row.productPrice * row.productQuantity }}
            </template>
          </el-table-column>
        </el-table>
        <div class="total-money">
          合计金额：￥{{ order.totalAmount }}
        </div>
        <!-- 费用信息-->
        <div class="order-title">
          <svg t="1750134429542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2533" width="40" height="40">
            <path
                d="M727.353766 788.089036c13.517875 0 23.923876-15.168468 23.923876-32.730449L751.277642 268.641413c0-17.561981-10.406001-32.731472-23.923876-32.731472L296.64828 235.909941c-13.519921 0-23.925922 15.168468-23.925922 32.731472l0 486.718197c0 17.561981 10.406001 32.730449 23.925922 32.730449L727.353766 788.090059 727.353766 788.089036zM346.346169 309.534775l184.060039 0 0 36.811394L346.346169 346.346169 346.346169 309.534775 346.346169 309.534775zM346.346169 419.96998l331.307661 0 0 36.812417L346.346169 456.782398 346.346169 419.96998 346.346169 419.96998zM346.346169 530.406209l331.307661 0 0 36.812417L346.346169 567.218626 346.346169 530.406209 346.346169 530.406209zM346.346169 640.841414l331.307661 0 0 36.811394L346.346169 677.652807 346.346169 640.841414 346.346169 640.841414zM346.346169 640.841414"
                fill="#1296db" p-id="2534"></path>
          </svg>
          <span class="font-small">费用信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">商品合计</el-col>
            <el-col :span="6" class="table-cell-title">运费</el-col>
            <el-col :span="6" class="table-cell-title">优惠券</el-col>
            <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">￥{{ order.totalAmount }}</el-col>
            <el-col :span="6" class="table-cell">￥{{ order.freightAmount }}</el-col>
            <el-col :span="6" class="table-cell">-￥{{ order.couponAmount }}</el-col>
            <el-col :span="6" class="table-cell">-￥{{ order.integrationAmount }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">活动优惠</el-col>
            <el-col :span="6" class="table-cell-title">折扣金额</el-col>
            <el-col :span="6" class="table-cell-title">订单总金额</el-col>
            <el-col :span="6" class="table-cell-title">应付款金额</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">-￥{{ order.promotionAmount }}</el-col>
            <el-col :span="6" class="table-cell">-￥{{ order.discountAmount }}</el-col>
            <el-col :span="6" class="table-cell">
              <span class="color-money">￥{{ order.totalAmount + order.freightAmount }}</span>
            </el-col>
            <el-col :span="6" class="table-cell">
              <span class="color-money">￥{{ order.payAmount + order.freightAmount - order.discountAmount }}</span>
            </el-col>
          </el-row>
        </div>
        <!-- 操作信息-->
        <div class="order-title">
          <svg t="1750134429542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2533" width="40" height="40">
            <path
                d="M727.353766 788.089036c13.517875 0 23.923876-15.168468 23.923876-32.730449L751.277642 268.641413c0-17.561981-10.406001-32.731472-23.923876-32.731472L296.64828 235.909941c-13.519921 0-23.925922 15.168468-23.925922 32.731472l0 486.718197c0 17.561981 10.406001 32.730449 23.925922 32.730449L727.353766 788.090059 727.353766 788.089036zM346.346169 309.534775l184.060039 0 0 36.811394L346.346169 346.346169 346.346169 309.534775 346.346169 309.534775zM346.346169 419.96998l331.307661 0 0 36.812417L346.346169 456.782398 346.346169 419.96998 346.346169 419.96998zM346.346169 530.406209l331.307661 0 0 36.812417L346.346169 567.218626 346.346169 530.406209 346.346169 530.406209zM346.346169 640.841414l331.307661 0 0 36.811394L346.346169 677.652807 346.346169 640.841414 346.346169 640.841414zM346.346169 640.841414"
                fill="#1296db" p-id="2534"></path>
          </svg>
          <span class="font-small">操作信息</span>
        </div>
        <el-table style="margin-top: 20px;width: 100%"
                  ref="orderHistoryTable"
                  :data="order.historyList" border>
          <el-table-column label="操作者" align="center">
            <template #default="{ row }">
              {{ row.operateMan }}
            </template>
          </el-table-column>
          <el-table-column label="操作时间" align="center">
            <template #default="{ row }">
              {{ formatTime(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center">
            <template #default="{ row }">
              {{ formatStatus(row.orderStatus) }}
            </template>
          </el-table-column>
          <el-table-column label="付款状态" align="center">
            <template #default="{ row }">
              {{ formatPayStatus(row.orderStatus) }}
            </template>
          </el-table-column>
          <el-table-column label="发货状态" align="center">
            <template #default="{ row }">
              {{ formatDeliverStatus(row.orderStatus) }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template #default="{ row }">
              {{ row.note }}
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </div>
  </div>


  <!--  订单跟踪弹窗-->
  <logistics-dialog v-model="logisticsDialogVisible"/>
  <!--  发送站内信弹窗-->
  <message-dialog v-model="messageDialogVisible"
                  :message="sendMessage"
                  @close="messageDialogVisible=false"
  />
  <!--   关闭订单弹窗-->
  <el-dialog title="关闭订单:"
             v-model="closeDialogVisible"
             width="30%">
    <el-form :model="closeInfo"
             label-width="100px">
      <el-form-item label="操作备注：">
        <el-input v-model="closeInfo.note" type="textarea" rows="3">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="closeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!--  备注订单弹窗-->
  <el-dialog title="备注订单:"
             v-model="markOrderDialogVisible"
             width="30%">
    <el-form :model="markInfo" label-width="100px">
      <el-form-item label="操作备注：">
        <el-input v-model="markInfo.note" type="textarea" placeholder="请输入操作备注">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!--  修改费用信息-->
  <el-dialog title="修改费用信息:"
             v-model="moneyDialogVisible"
             width="40%">
    <div class="table-layout">
      <el-row>
        <el-col :span="6" class="table-cell-title">商品合计</el-col>
        <el-col :span="6" class="table-cell-title">运费</el-col>
        <el-col :span="6" class="table-cell-title">优惠券</el-col>
        <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
        <el-col :span="6" class="table-cell">
          <el-input v-model.number="moneyInfo.freightAmount">
            <template #prepend>￥</template></el-input>
        </el-col>
        <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
        <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell-title">活动优惠</el-col>
        <el-col :span="6" class="table-cell-title">折扣金额</el-col>
        <el-col :span="6" class="table-cell-title">订单总金额</el-col>
        <el-col :span="6" class="table-cell-title">应付款金额</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
        <el-col :span="6" class="table-cell">
          <el-input v-model.number="moneyInfo.discountAmount">
            <template #prepend>-￥</template>
          </el-input>
        </el-col>
        <el-col :span="6" class="table-cell">
          <span class="color-danger">￥{{order.totalAmount+moneyInfo.freightAmount}}</span>
        </el-col>
        <el-col :span="6" class="table-cell">
          <span class="color-danger">￥{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
        </el-col>
      </el-row>
    </div>
    <el-form-item>
      <el-button @click="moneyDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
    </el-form-item>
  </el-dialog>


</template>

<style scoped lang="scss">
.order-detail {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .order-header {
    margin-bottom: 20px;
  }

  .order-body {
    margin-bottom: 20px;

    .operate-container {
      background: #F2F6FC;
      height: 80px;
      margin: -20px -20px 0;
      line-height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .color-danger {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        color: #F56C6C;
      }

      .operate-button-container {
        float: right;
        margin-right: 20px
      }
    }

    .order-title {
      display: flex;
      align-items: center;
      margin: 20px 0;
      //正文
      .font-small {
        font-weight: bold;
        color: #606266;
      }
    }

    .total-money {
      color: #F56C6C;
      font-size: 22px;
      font-weight: bold;
      margin: 20px 10px;
      padding: 10px;
    }

    .table-layout {
      margin-top: 20px;
      border: 1px solid #DCDFE6;

      .table-cell {
        height: 60px;
        line-height: 40px;
        border: 1px solid #DCDFE6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;

        .color-money {
          font-weight: bold;
          color: #F56C6C;
        }
      }

      .table-cell-title {
        border: 1px solid #DCDFE6;
        padding: 10px;
        background: #F2F6FC;
        text-align: center;
        font-size: 14px;
        color: #303133;
      }
    }
  }
}

.table-layout {
  margin: 20px 0;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;

    .color-danger{
      color: #F56C6C;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }

}
</style>